<template>
	<div class="flex">
		<!-- 用料标题begin -->
		<div class="Materials_Title">
			<div class="left flex_row">
				<strong>用料</strong>
			</div>
		</div>
		<!-- 用料标题end -->
		<div class="Materials">
			<ul class="UnTitle" v-for="(item, index) in yl" :key="index">
				<li class="flex_space_between border_bottom">
					<span>{{ item.ylName }}</span>
					<span>{{ item.ylUnit }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FoodDetailInfoMaterials',
	props: {
		yl: {
			type: Array,
		},
	},
};
</script>

<style scoped>
.flex {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 20px 20px 20px 20px;
}
.flex_row {
	display: flex;
}

/*  用料标题begin */
.Materials_Title {
	display: flex;
	line-height: 35px;
	font-size: 14px;
}
.Materials_Title > .left {
	flex: 1;
	padding-left: 5px;
}
.Materials_Title > .left strong {
	margin-right: 10px;
	font-size: 18px;
}
.Materials_Title > .right {
	text-align: center;
	font-size: 22px;
	width: 80px;
}
.Materials_Title > .right > .down {
	flex: 1;
	background-color: #f4f4f4;
	border-radius: 17.5px 0 0 17.5px;
}
.Materials_Title > .right > .up {
	flex: 1;
	background-color: #f4f4f4;
	border-radius: 0 17.5px 17.5px 0;
}
/*  用料标题end */

/* 用料begin */
.Materials {
	display: flex;
	flex-direction: column;
	line-height: 35px;
	font-size: 14px;
}
.flex_space_between {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.Materials .border_bottom {
	border-bottom: 1.5px dotted #eee;
}
.Materials .UnTitle :last-child,
.Materials .TitleAndlist :last-child {
	border-bottom: none;
}
.Materials .TitleAndlist .Title {
	background-color: #f4f4f4;
	border-radius: 10px;
}
.Materials ul li,
.Materials ul div {
	padding-left: 5px;
}
/* 用料end */
</style>
